<html>
	<head>
		<!-- Author:Bbaa -->
		<meta charset="UTF-8">
		<title>
			拼图
		</title>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">
		</script>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"
		rel="stylesheet">
		<script src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js">
		</script>
		<!--<script src="https://cdn.bootcss.com/Chart.js/2.6.0/Chart.bundle.min.js"></script>-->
		<!--[if lt IE 10]>
			<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
			<script src="./ie.js"></script>
			<script src="./PIE_IE678_uncompressed.js"></script>
		<![endif]-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<style type="text/css">
			body {
				font-family: "微软雅黑","Microsoft YaHei";
				background:#eee;
				-moz-user-select: none;
				-webkit-user-select: none;
				user-select: none;
			}
		</style>
		<script src="http://bbaass.tk/Demo/puzzle.js?v=20171216"></script>
	</head>
	<body>
				<div class="container bs-docs-container">
			<div class="row">
				<div class="noselect panel panel-primary" style="margin:1% 1% 1% 1%;">
					<div class="panel-heading">
						<h3 class="panel-title">
							拼图demo
						</h3>
					</div>
					<div id="bd" style="margin:0% 5% 5% 5%;">
						<div class="login-top" style="display:none">
							<br>
							<div class="alert alert-info">图片大小 width:&nbsp;&nbsp;&nbsp;height:</div>
						</div>
						<br>
						<div id="jdt" style="display:none">
							<b><Span id="Info">加载中:</span></b>
							<br>
							<div class="progress progress-striped active">
								<div id="load" class="progress-bar progress-bar-info" role="progressbar" style="width: 0%;"></div>
							</div>
						</div>
						<div id="setting">
							<form onsubmit="return false;">
								<table class="table table-border table-bordered table-striped">
									<tbody>
										<tr>
											<td><strong><span style="float:left">原始图片:&nbsp;&nbsp;</span></strong><input id="input_pic" type="text" value="./full.jpg" class="form-control" style="float:left;width:92%"></input></td>
										</tr>
										<tr style="text-align:center">
											<td>
												<strong>行：</strong>
												<input type="text" id="y" value="5" class="" style="width:100px;">
												<strong>列：</strong><input type="text" id="x" value="5" class="" style="width:100px;">
												<strong>移动次数：</strong><input type="text" id="count" value="500" class="" style="width:100px;">
												
											</td>
										</tr>
										<tr style="text-align:center">
											<td>
												<strong>每帧移动多少像素：</strong><input type="text" id="frame" value="5" class="" style="width:100px;">
												<strong>延迟：</strong><input type="text" id="sleep" value="10" class="" style="width:100px;">
											</td>
										</tr>
										<tr style="text-align:center">
											<td><button id="play" type="submit" class="btn btn-primary">开始复原</button></td>
										</tr>
									</tbody>
								</table>
							</form>
						</div>
						<div style="text-align:center;">
							<canvas id="show" width="500" height="500" style="border: 1px solid #428bca;border-radius: 4px;display:none;"></canvas>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>